<template>
    <div>
        <div class="f1">
            <img src="../../assets/img_pinpai/F1beiJingTu-7.jpg" alt="">
        </div>
        <div class="f2">
            <div class="banxin">
                <ul>
                    <li @click="$router.push('/home/pinpai')">品牌历史</li>
                    <li class="active" @click="$router.push('/home/rongyu')">品牌荣誉</li>
                    <li @click="$router.push('/home/chuancheng')">传承人</li>
                </ul>
            </div>
        </div>
        <div class="beijing">
            <div class="banxin">
             <!-- ----------面包屑导航--------- -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="bum">
        <el-breadcrumb-item>您现在所在的位置</el-breadcrumb-item>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>品牌</el-breadcrumb-item>
        <el-breadcrumb-item>品牌荣誉</el-breadcrumb-item>
      </el-breadcrumb>
                <div class="f4">
                    <div class="sm">
                        <div class="left">
                            <img class="tu" src="../../assets/img_pinpai/RongYuTU1-1.jpg" alt="">
                            <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                            <p>中华老字号</p>
                        </div>
                       <div class="right">
                            <img src="../../assets/img_pinpai/RongYuTU1-5.jpg" alt="">
                            <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                            <p>中华老字号</p>
                        </div>
                    </div>
                    <div class="zhong">
                        <div class="left">
                            <img class="tu" src="../../assets/img_pinpai/RongYuTU1-2.jpg" alt="">
                            <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                            <p>示范企业</p>
                        </div>
                       <div class="right">
                            <img src="../../assets/img_pinpai/RongYuTU1-4.jpg" alt="">
                            <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                            <p>非物质文化</p>
                        </div>
                    </div>
                    <div class="big">
                        <div class="item">
                            <img class="tu" src="../../assets/img_pinpai/RongYuTU1-3.jpg" alt="">
                            <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                            <p>稻香村商标</p>
                        </div>
                    </div>
                </div>

                <div class="f5">
                    <div class="item">
                        <img class="tu" src="../../assets/img_pinpai/RongYuTU2-1.jpg" alt="">
                        <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                        <p>面包技术比赛金奖</p>
                    </div>
                    <div class="item">
                        <img class="tu" src="../../assets/img_pinpai/RongYuTU2-2.jpg" alt="">
                        <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                        <p>月饼技术比赛金奖</p>
                    </div>
                    <div class="item">
                        <img class="tu" src="../../assets/img_pinpai/RongYuTU2-3.jpg" alt="">
                        <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                        <p>HACCP体系认证</p>
                    </div>
                        <div class="item">
                        <img class="tu" src="../../assets/img_pinpai/RongYuTU2-4.jpg" alt="">
                        <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                        <p>质量管理体系认证</p>
                    </div>
                </div>
                <div class="f6">
                    <div class="item">
                        <img class="tu" src="../../assets/img_pinpai/RongYuTU3-4.jpg" alt="">
                        <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                        <p>&nbsp;&nbsp;行业企业荣誉</p>
                    </div>
                    <div class="item">
                        <img class="tu" src="../../assets/img_pinpai/RongYuTU3-2.jpg" alt="">
                        <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                        <p>2006年国饼十佳</p>
                    </div>
                    <div class="item">
                        <img class="tu" src="../../assets/img_pinpai/RongYuTU3-3.jpg" alt="">
                        <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;中华老字号</p>
                    </div>
                        <div class="item">
                        <img class="tu" src="../../assets/img_pinpai/RongYuTU3-4.jpg" alt="">
                        <img class="kuang" src="../../assets/img_pinpai/RongYuTongYong.png" alt="">
                        <p>&nbsp;&nbsp;月饼品牌荣誉</p>
                    </div>
                </div>



            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: '1',
                num:1
                
        };
      }
    }
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
.f1{
    img{
        width: 100%;
        display: block;
    }
}
.f2{
    background-color: #e6dfc9;

    .banxin{
        width: 1200px;
        margin: 0 auto;
        ul{
            font-size: 20px;
            display: flex;
            left: 0;
            width: 50%;
            background-color: #e6dfc9;
            li{
                line-height: 52px;
                height: 52px;
                list-style: none;
                margin: 0 auto;
                width: 100%;
                user-select: none;
                cursor: pointer;
                &:hover{
                    background: #ceaf59;
                    color: #fff;
                }
                &.active{
                    background-color: #ceaf59;
                    color: #fff;;
                }
            }
        }







    }
}
.beijing{
background-color: #fcfaf4;
    .banxin{
        width: 1200px;
        margin: 0 auto;
        .bum{
            height: 30px;
            line-height: 30px;
            color:#333 ;
            margin-top: 20px;

        }
        .f4{
            position: relative;
            height: 400px;
            .sm{

                display: flex;
                justify-content: space-between;
                height: 200px;
                margin: 100px 20px;
                .left{
                    display: flex;
                    position: relative;
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;
                    overflow: hidden;
                    .kuang{
                        position: absolute;
                        height: 100%;
                        z-index: 1;
                    }
                    .tu{
                        position: absolute;
                        height: 88%;
                        left: 12px;
                    }
                    p{
                        position: absolute;
                        color:#fff;
                        bottom: 14px;
                        background-color: red;
                        padding: 11px 60px 13px;
                        // left: 45px;
                    }
                }
                .right{
                    display: flex;
                    position: relative;
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;
                    overflow: hidden;
                    .kuang{
                        position: absolute;
                        height: 100%;
                        z-index: 1;
                    }
                    .tu{
                        position: absolute;
                        height: 88%;
                        left: 12px;
                    }
                    p{
                        position: absolute;
                        color:#fff;
                        bottom: 14px;
                        background-color: red;
                        padding: 11px 60px 13px;
                        // left: 45px;
                    }
                }
            }
            .zhong{
                position: absolute;
                top: -90px;
                display: flex;
                justify-content: space-between;
                height: 300px;
                margin: 50px 180px;
                .left{
                    z-index: 2;
                    display: flex;
                    position: relative;
                    width: 300px;
                    height: 300px;
                    border-radius: 50%;
                    overflow: hidden;
                    .kuang{
                        position: absolute;
                        height: 100%;
                        z-index: 1;
                    }
                    .tu{
                        position: absolute;
                        height: 88%;
                        left: 12px;
                    }
                    p{
                        position: absolute;
                        color:#fff;
                        bottom: 14px;
                        background-color: red;
                        padding: 11px 110px 15px;
                        // left: 45px;
                    }
                }
                .right{
                    z-index: 2;
                    margin-left: 250px;
                    display: flex;
                    position: relative;
                    width: 300px;
                    height: 300px;
                    border-radius: 50%;
                    overflow: hidden;
                    .kuang{
                        position: absolute;
                        height: 100%;
                        z-index: 1;
                    }
                    .tu{
                        position: absolute;
                        height: 88%;
                        left: 12px;
                    }
                    p{
                        position: absolute;
                        color:#fff;
                        bottom: 14px;
                        background-color: red;
                        padding: 11px 110px 15px;
                        // left: 45px;
                    }
                }
            }
            .big{
                position: absolute;
                top: -70px;
                right: 400px;
                    .item{
                    z-index: 2;
                    display: flex;
                    position: relative;
                    width: 400px;
                    height: 400px;
                    border-radius: 50%;
                    overflow: hidden;
                    .kuang{
                        position: absolute;
                        height: 100%;
                        z-index: 1;
                    }
                    .tu{
                        position: absolute;
                        height: 88%;
                        left: 24px;
                    }
                    p{
                        position: absolute;
                        color:#fff;
                        bottom: 14px;
                        background-color: red;
                        padding: 13px 150px 33px;
                        // left: 45px;
                    }
                }
                
            }
        }

        .f5{
            margin-top: 80px;
            display: flex;
            justify-content: space-between;
            .item{
                display: flex;
                position: relative;
                width: 290px;
                height: 290px;
                border-radius: 50%;
                overflow: hidden;
                .kuang{
                    position: absolute;
                    height: 100%;
                    z-index: 1;
                }
                .tu{
                    position: absolute;
                    height: 88%;
                    left: 15px;
                }
                p{
                    position: absolute;
                    color:#fff;
                    bottom: 14px;
                    background-color: #ceaf59;
                    padding: 11px 80px 30px;
                    text-align: center;
                    // left: 45px;
                }
            }
        }
        .f6{
            margin: 15px 0 80px;
            display: flex;
            justify-content: space-between;
            .item{
                display: flex;
                position: relative;
                width: 285px;
                height: 285px;
                border-radius: 50%;
                overflow: hidden;
                .kuang{
                    position: absolute;
                    height: 100%;
                    z-index: 1;
                }
                .tu{
                    position: absolute;
                    height: 88%;
                    left: 15px;
                }
                p{
                    position: absolute;
                    color:#fff;
                    bottom: 14px;
                    background-color: #ceaf59;
                    padding: 11px 80px 30px;
                    text-align: center;
                    // left: 45px;
                }
            }
        }
        


    }
}
</style>